<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>组件1</title>
    </head>
    <body>
        <!-- <div id = "app">
            <my-component></my-component>
        </div>
        <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            // 全局注册
            Vue.component('my-component',{
                template:'<div>{{ message }}</div>',
                data:function(){
                    return {
                        message: '组件内容'
                    }
                }
            });
            var app = new Vue({
                el:"#app"
            })
        </script> -->

        <!-- 三个按钮会互相影响 -->
        <!-- <div id = "app">
            <my-component></my-component>
            <my-component></my-component>
            <my-component></my-component>
        </div>
        <script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
        <script>
            var data = {
                counter:0
            };
            Vue.component('my-component',{
                template:'<button @click = "counter++">{{counter}}</button>',
                data:function(){
                    return data;
                }
            });
            var app = new Vue({
                el:"#app"
            })
        </script> -->



        <!-- 三个按钮不互相影响 -->
        <div id = "app">
                <my-component></my-component>
                <my-component></my-component>
                <my-component></my-component>
            </div>
            <script src = "../../vue.min.js"></script>
            <script>
                var data = {
                    counter:0
                };
                Vue.component('my-component',{
                    template:'<button @click = "counter++">{{counter}}</button>',
                    data:function(){
                        /*mark 每次都新创建一个object*/
                        return {
                            counter: 0
                        };
                    }
                });
                var app = new Vue({
                    el:"#app"
                })
            </script>
    </body>
</html>